<template>
    <div class="mycotenent">
       <div class="top">
          <div class="topone">
              <span>217021468</span>
              <span>46987153</span>
              <span>165524088</span>
              <span>4510227</span>
          </div>
          <div class="toptwo">
            <span>累计确诊</span>
            <span>现存确诊</span>
            <span>累计治愈</span>
             <span>累计死亡</span>
          </div>
           
       </div>
       <div class="bottom">
          <div class="btn">
            <button @click="btnclick1" :class="{ click: ifclick1 }">累计确诊</button>
            <button @click="btnclick2" :class="{ click: ifclick2 }">现存确诊</button>
        </div>
         <div class="img1"></div>
         <div class="img2"></div>
         <div class="img3"></div>
          <!-- 世界地图 -->
         <div class="WorldMap"></div>

       </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import $ from "jquery";
import { centermap } from "@/compoenfun/option";

onMounted(() => {
  $.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
    dataType: "jsonp",
    success: res => {
      let data = JSON.parse(res.data);
      centermap(data);
    }
  });
});
</script>

<style lang="scss" scoped>
.mycotenent {
  height: 100%;
}
.top {
  height: 130px;

  background-color: rgba($color: #000, $alpha: 0.1);
  .topone,
  .toptwo {
    display: flex;
    width: 100%;
    justify-content: space-around;
  }
  .topone span {
    display: flex;
    justify-content: space-around;
    // display: block;
    text-align: center;
    margin-top: 20px;
    display: block;
    color: #ffeb7b;
    font-weight: 700;
    width: 180px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    // background-color: pink;
  }
  .toptwo {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    color: #97b5c8;
  }
}
.bottom {
  position: relative;
  height: calc(100% - 130px);
  overflow: hidden;
  // background-color: #cccccc;
  .img1 {
    height: 490px;
    width: 490px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    background-image: url("@/assets/map.bab2b509.png");
    background-size: 100% 100%;
  }
  .img2 {
    // position: absolute;
    // left: 6.5vw;
    // top:  -1.52083vw;
    // margin: auto;
    background-size: 100% 100%;
    background-image: url("@/assets/jt.c268bab5.png");
    width: 550px;
    height: 550px;
    opacity: 0.6;
    animation: cartoon2 15s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    // transform: translate(-50%,-50%);
  }
  .img3 {
    height: 600px;
    width: 600px;
    background: url("@/assets/lbx.0dea0f97.png");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: 100% 100%;
    opacity: 0.8;
    animation: cartoon1 15s linear infinite;
  }
}
.WorldMap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: 100%;
  height: 500px;
  // transform: translate(0, 110px);
  // z-index: 2;
}
.btn {
  width: 810px;
  position: absolute;
  top: 40px;
  display: flex;
  justify-content: space-around;
}
.btn button {
  height: 60px;
  width: 200px;
  font-size: 25px;
  z-index: 10;
  border-radius: 30px;
  background-color: #62b6ff3d;
  border: none;
  color: white;
  cursor: pointer;
}
.btn .click {
  color: #ffe14d;
}

.btn button:focus {
  outline: none;
}

@keyframes cartoon1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes cartoon2 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
